<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,user-scalable=0" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"  crossorigin="anonymous"></script>


    <title>记账</title>
</head>
<style>
    header{
        width: 100%;
        height: 70px;
        color: white;
        background-color: #5FC0CD;
    }
    .register{
        float: left;
        text-align: left;
        padding-left: 2%;
        width: 20%;
        height: 70px;
        line-height: 70px;
        font-size: 1em;
    }
    .login{
        float: left;
        text-align: center;
        width: 56%;
        height: 70px;
        line-height: 70px;
        font-size: 1em;
    }
    .close{
        float: left;
        text-align: right;
        padding-right: 2%;
        width: 20%;
        height: 70px;
        line-height: 70px;
        font-size: 1em;
    }
    .bg-div{
        float: left;
        margin: 12px 0 12px 0;
        width: 100%;
        height: 70px;
        display: flex;
        background-color: white;
    }
    img{
        width: 20px;
        height: 30px;
        margin: 1em 0 1em 1em;
    }
    .phone-text{
        margin: 0 0 1rem;
        height: 30px;
    }
    .lock-text{
        margin: 0 0 1rem;
        height: 30px;
        border-left: 2px solid #D4D4D4;
    }
    .button-login{
        float: left;
        margin-top: 10px;
        text-align: center;
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 1em;
        color: white;
        background-color: #386559;
    }
    .no-password{
        float: right;
        margin: 2% 2% 0 0;
        width: 65px;
        height: 20px;
    }
    a{
        color: #66cccc;
    }

</style>
<script type="text/javascript">

</script>
<body>
<header>
    <div class="register"></div>
    <div class="login">记账</div>
</header>
<form th:action="@{/add}" method="post">
    <span th:text="${msg}" style="color: red"></span>
    <div class="form-group">
        <label for="exampleFormControlInput1">记账金额</label>
        <input type="number" step="0.01" class="form-control" name="money" id="exampleFormControlInput1">
    </div>
    <div class="form-group">
        <label>记账时间</label>
        <input type="date" class="form-control" name="date" >
    </div>
    <div class="form-group">
        <label for="exampleFormControlSelect2">记账类型</label>
        <input type="text" list="test" class="form-control" name="type" id="exampleFormControlSelect2">
            <datalist id="test" th:each="a:${type}">
                <option th:each="a:${type}" th:value="${a}"></option>
            </datalist>
        </input>
    </div>
    <div class="form-group">
        <label for="exampleFormControlTextarea1">记账原因</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" name="reason" rows="3"></textarea>
    </div>
    <button class="button-login" type="submit" >OK</button>
</form>

</body>

</html>